<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交订单</title>
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <link rel="icon" type="text/css" href="img/favicon.ico">
    <script src="js/html5shiv.min.js"></script>
    <script src="js/respond.min.js"></script>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/common.css"/>
    <link rel="stylesheet" href="css/confirmOrder.css">
</head>
<body>
    <!--网页头部-->
    <div id="userheader"></div>
    <!--内容-->
    <div id="content">
        <!--内容导航栏-->
        <nav class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="#">家具租赁</a>
                    </li>
                    <li>
                        <a href="#">增值服务</a>
                    </li>
                    <li>
                        <a href="#">最新咨询</a>
                    </li>
                    <li>
                        <a href="#">个人中心</a>
                    </li>
                </ul>
            </div>
        </nav>
        <div class="container">
            <!--选择收货地址面板-->
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h4>选择收货地址</h4>
                </div>
                <div class="panel-body">
                    <ul class="address">
                        <li>
                            <div class="border choosed">
                                <!--圆圈-->
                                <div class="col-xs-1">
                                    <b></b>
                                </div>
                                <div class="col-xs-10">
                                    <p>
                                        地址：上海市上海市宝山区泰德科技园A座 2-17上海市上海市宝山区泰德科技园A座 2-17
                                    </p>
                                    <p>
                                        姓名：马化腾
                                    </p>
                                    <p>
                                        联系方式：155-155-1555
                                    </p>
                                    <p>
                                        <span>删除</span>
                                        <span class="rt">已设为默认地址</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="border">
                                <!--圆圈-->
                                <div class="col-xs-1">
                                    <b></b>
                                </div>
                                <div class="col-xs-10">
                                    <p>
                                        地址：上海市上海市宝山区泰德科技园A座 2-17上海市上海市宝山区泰德科技园A座 2-17
                                    </p>
                                    <p>
                                        姓名：马化腾
                                    </p>
                                    <p>
                                        联系方式：155-155-1555
                                    </p>
                                    <p>
                                        <span>删除</span>
                                        <span class="rt">设置为默认地址</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="border">
                                <!--圆圈-->
                                <div class="col-xs-1">
                                    <b></b>
                                </div>
                                <div class="col-xs-10">
                                    <p>
                                        地址：上海市上海市宝山区泰德科技园A座 2-17上海市上海市宝山区泰德科技园A座 2-17
                                    </p>
                                    <p>
                                        姓名：马化腾
                                    </p>
                                    <p>
                                        联系方式：155-155-1555
                                    </p>
                                    <p>
                                        <span>删除</span>
                                        <span class="rt">设置为默认地址</span>
                                    </p>
                                </div>
                            </div>
                        </li>
                        <!--添加新地址-->
                        <li id="addAddress">
                            <div class="border">
                                <div data-toggle="modal" data-target="#ModalBox">+</div>
                                <p>新增收货地址</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
            <!--确认订单信息面板-->
            <div id="panel" class="panel panel-default">
                <div class="panel-heading">
                    <h4>确认订单信息</h4>
                </div>
                <div class="panel-body">
                    <!--列表组头部-->
                    <ul class="product list-inline">
                        <li>商品信息</li>
                        <li>单价</li>
                        <li>数量</li>
                        <li>押金</li>
                        <li>时长</li>
                    </ul>
                    <!--列表组-->
                    <ul class="orders list-inline">
                        <li class="imgInfo">
                            <img src="img/checked.jpg">
                            <div class="media">
                                <div class="media-left">
                                    <img src="img/example.jpg">
                                </div>
                                <div class="media-body">
                                    <p>欧尚办公组合家具</p>
                                    <p>
                                        <img src="img/color.jpg">
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="money">¥<span>255</span>/月</li>
                        <li class="calNum">
                            <b class="glyphicon glyphicon-minus-sign"></b>
                            <span>1</span>
                            <b class="glyphicon glyphicon-plus-sign"></b>
                        </li>
                        <li class="money">¥<span>500</span></li>
                        <li class="selectDate">
                            <span class="active">12个月</span>
                            <span>24个月</span>
                        </li>
                    </ul>
                    <!--列表组-->
                    <ul class="orders list-inline">
                        <li class="imgInfo">
                            <img src="img/checked.jpg">
                            <div class="media">
                                <div class="media-left">
                                    <img src="img/example.jpg">
                                </div>
                                <div class="media-body">
                                    <p>欧尚办公组合家具</p>
                                    <p>
                                        <img src="img/color.jpg">
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="money">¥<span>255</span>/月</li>
                        <li class="calNum">
                            <b class="glyphicon glyphicon-minus-sign"></b>
                            <span>1</span>
                            <b class="glyphicon glyphicon-plus-sign"></b>
                        </li>
                        <li class="money">¥<span>500</span></li>
                        <li class="selectDate">
                            <span class="active">12个月</span>
                            <span>24个月</span>
                        </li>
                    </ul>
                    <!--列表组-->
                    <ul class="orders list-inline">
                        <li class="imgInfo">
                            <img src="img/checked.jpg">
                            <div class="media">
                                <div class="media-left">
                                    <img src="img/example.jpg">
                                </div>
                                <div class="media-body">
                                    <p>欧尚办公组合家具</p>
                                    <p>
                                        <img src="img/color.jpg">
                                    </p>
                                </div>
                            </div>
                        </li>
                        <li class="money">¥<span>255</span>/月</li>
                        <li class="calNum">
                            <b class="glyphicon glyphicon-minus-sign"></b>
                            <span>1</span>
                            <b class="glyphicon glyphicon-plus-sign"></b>
                        </li>
                        <li class="money">¥<span>500</span></li>
                        <li class="selectDate">
                            <span class="active">12个月</span>
                            <span>24个月</span>
                        </li>
                    </ul>
                    <!--结算总计-->
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-xs-6">
                                <input class="form-control" type="text" placeholder="给卖家留言">
                            </div>
                            <div class="col-xs-6">
                                <div class="col-xs-2">
                                    总计
                                </div>
                                <div class="col-xs-10">
                                    <p>
                                        租赁费用：<span class="bigSpan color">¥4344.00</span>+押金：<span class="bigSpan color">¥3300.00</span>
                                    </p>
                                    <div class="flex">
                                        <p>
                                            运送方式：
                                            <b>普通快递</b>
                                            <span class="color">邮费自付</span>
                                        </p>
                                        <span class="color">20.00</span>
                                    </div>
                                    <div class="useCoupon flex">
                                        <div class="outPosition">
                                            已使用优惠券
                                            <i class="forDown">
                                                <s id="coupon">满400-60</s>
                                                <u id="xsCoupon"></u>
                                            </i>
                                            <div id="xzCoupon" class="coupon">
                                                <ul>
                                                    <li>
                                                        <div>
                                                            <span>满</span><span>100</span><span>-</span><span class="re_money">20</span>
                                                        </div>
                                                        <div>
                                                            <img class="img-responsive" src="img/shoppingCoupon.jpg" alt="">
                                                        </div>
                                                    </li>
                                                    <li>
                                                        <div>
                                                            <span>满</span><span>100</span><span>-</span><span class="re_money">30</span>
                                                        </div>
                                                        <div>
                                                            <img class="img-responsive" src="img/shoppingCoupon.jpg" alt="">
                                                        </div>
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                        <span class="color">-60.00</span>
                                    </div>
                                    <div class="noCashRange flex">
                                        <p>
                                            使用免押金额度
                                        </p>
                                        <u>
                                            <span class="color">20000.00</span>-<span class="color">3000.00</span>
                                        </u>
                                    </div>
                                    <div class="flex">
                                        <p>
                                            订单合计
                                        </p>
                                        <span class="color">4684.00</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--底部结算-->
                    <div class="container-fluid">
                        <div class="bottom">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="col-xs-offset-6 col-xs-6 bottomCal">
                                        <div>
                                            <p>实付款</p>
                                            <span class="bigSpan color">¥4600.00</span>
                                        </div>
                                        <div>
                                            <span>寄送至</span>
                                            <span>上海市宝山区泰德科技园A座2-17上海市宝山区泰德科技园A座2-17</span>
                                        </div>
                                        <div class="goodsReceipt">
                                            <span>收货人:</span><span>123</span>
                                        </div>
                                        <div>
                                            <button class="btn btn-warning">提升免押金额度</button>
                                            <button class="btn rentNow">立即租赁</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer"></div>
    <!--修改地址模态框-->
    <div id="ModalBox" class="modal" data-backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <span class="close" data-dismiss="modal">&times;</span>
                    <h4 class="modal-title">新增收货地址</h4>
                </div>
                <div class="modal-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label class="control-label">收货人:</label>
                            <input type="text" class="form-control" placeholder="请输入收货人姓名">
                        </div>
                        <div class="form-group">
                            <label id="district" class="control-label">所在地区:</label>
                            <div id="selectAdd" data-toggle="distpicker">
                                <div class="form-group">
                                    <label class="sr-only" for="province1">Province</label>
                                    <select class="form-control" id="province1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="city1">City</label>
                                    <select class="form-control" id="city1"></select>
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="district1">District</label>
                                    <select class="form-control" id="district1"></select>
                                </div>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="control-label">详细地址:</label>
                            <input type="text" class="form-control" placeholder="请输入详细地址">
                        </div>
                        <div class="form-group">
                            <label class="control-label">联系方式:</label>
                            <input type="text" class="form-control" placeholder="请输入收货人联系方式">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning lf" data-dismiss="modal">提交</button>
                    <input type="checkbox">&nbsp;设置为默认地址
                </div>
            </div>
        </div>
    </div>
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootlint.js"></script>
    <script src="js/common.js"></script>
    <script src="js/distpicker.data.js"></script>
    <script src="js/distpicker.js"></script>
    <script src="js/main.js"></script>
    <script src="js/confirmOrder.js"></script>
    <!--<script>-->
    <!--bootlint.showLintReportForCurrentDocument([]);-->
    <!--</script>-->
</body>
</html>